import React, { useState, useRef, useEffect } from 'react';
import { Button, Popover } from 'antd';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
import Specifications from './components/Specifications';
const SelelctModel = (props) => {
  const {
    loading,
    list,
    visible = {},
    getCheckboxProps,
    data,
    setSelectedRowKeys,
    selectedRowKeys,
    hasSku = '0',
  } = props;
  console.log(props, 1111111111);
  const { show = false, details = [] } = visible;
  const [openPopover, setOpenPopover] = useState({});
  const { id, goodsType = 'offline' } = data;
  console.log(openPopover);
  const rowSelection = {
    type: 'radio',
    hideSelectAll: true,
    // onChange: (selectedRowKeys, selectedRows) => {
    //   setSelectedRowKeys(selectedRows);
    // },
    onSelect: (record, selected) => {
      const { skuFlag, id } = record;
      if (skuFlag === '1' && hasSku === '1') {
        setOpenPopover({ [id]: true });
      } else {
        setSelectedRowKeys([record]);
      }
    },
    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),
    getCheckboxProps: (record) => {
      if (!getCheckboxProps) {
        return {
          disabled: record.id === id && goodsType === 'offline',
          // Column configuration not to be checked
          id: record.id,
        };
      } else {
        return getCheckboxProps(record, goodsType);
      }
    },
    preserveSelectedRowKeys: true,
  };
  useEffect(() => {
    if (show) {
      setSelectedRowKeys(details);
    } else {
      setSelectedRowKeys([]);
    }
  }, [show]);
  // 搜索参数

  const setSpecifications = (data) => {
    setSelectedRowKeys([data]);
  };
  const Copponents = (props) => {
    const { record } = props;
    return (
      <Specifications
        setFatherSelectedRowKeys={setSpecifications}
        onClose={() => setOpenPopover({ [record.id]: false })}
        data={record}
        selectedKeys={selectedRowKeys}
        visible={openPopover}
      ></Specifications>
    );
  };
  const searchItems = [
    {
      label: '名称',
      name: 'keyword',
    },
  ];
  // table 表头
  const getColumns = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
    },
    {
      title: '封面',
      dataIndex: 'cover',
      render: (val) => {
        return <PopImgShow width={24} url={val}></PopImgShow>;
      },
    },
    {
      title: '规格',
      dataIndex: 'skuFlag',
      render: (val, record) => {
        return val === '1' && hasSku === '1' ? (
          record.id === id && goodsType === 'offline' ? (
            '--'
          ) : (
            <Popover
              trigger="click"
              onOpenChange={setOpenPopover}
              content={<Copponents record={record}></Copponents>}
              open={openPopover[record.id]}
            >
              <Button
                type="link"
                onClick={() =>
                  setOpenPopover({
                    [record.id]: true,
                  })
                }
              >
                选择规格{' '}
              </Button>
            </Popover>
          )
        ) : (
          '--'
        );
      },
    },
    {
      title: '库存',
      dataIndex: 'stock',
    },
  ];
  return (
    <>
      <TableDataBlock
        rowSelection={rowSelection}
        loading={loading}
        searchItems={searchItems}
        columns={getColumns}
        params={{ withSkuFlag: hasSku, status: '1' }}
        rowKey={(record) => `${record.id}`}
        dispatchType="selectionWindow/fetchListOfflineGoods"
        {...list}
      ></TableDataBlock>
    </>
  );
};

export default connect(({ selectionWindow, loading }) => ({
  list: selectionWindow.offlineGoodsList,
  loading: loading.effects['selectionWindow/fetchListOfflineGoods'],
}))(SelelctModel);
